import React from 'react'
import { useSearchParams } from 'react-router-dom'
import { useAuth } from '../contexts/AuthProvider'
import { Button } from '../components/ui/Button'
import { 
  User, 
  Bell, 
  Lock, 
  Crown
} from 'lucide-react'

export function Settings() {
  const [searchParams] = useSearchParams()
  const { userProfile } = useAuth()
  const activeTab = searchParams.get('tab') || 'profile'

  const tabs = [
    { id: 'profile', label: 'Profile', icon: User },
    { id: 'notifications', label: 'Notifications', icon: Bell },
    { id: 'privacy', label: 'Privacy', icon: Lock },
    { id: 'subscription', label: 'Subscription', icon: Crown }
  ]

  const setActiveTab = (tabId: string) => {
    const newParams = new URLSearchParams(searchParams)
    newParams.set('tab', tabId)
    window.history.replaceState({}, '', `?${newParams.toString()}`)
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Settings</h1>
        <p className="text-gray-600">
          Manage your account preferences and research settings
        </p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Sidebar */}
        <div className="bg-white rounded-lg border border-gray-200 p-4">
          <nav className="space-y-1">
            {tabs.map(tab => {
              const Icon = tab.icon
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`w-full flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                    activeTab === tab.id
                      ? 'bg-blue-100 text-blue-700'
                      : 'text-gray-700 hover:text-gray-900 hover:bg-gray-50'
                  }`}
                >
                  <Icon className="h-4 w-4 mr-3" />
                  {tab.label}
                </button>
              )
            })}
          </nav>
        </div>

        {/* Content */}
        <div className="lg:col-span-3">
          <div className="bg-white rounded-lg border border-gray-200 p-6">
            {activeTab === 'profile' && (
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-4">Profile Settings</h3>
                <p className="text-gray-600 mb-6">Update your personal information and research interests.</p>
                
                <div className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Full Name
                    </label>
                    <input
                      type="text"
                      defaultValue={userProfile?.full_name || ''}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
                    />
                  </div>
                  
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">
                      Display Name
                    </label>
                    <input
                      type="text"
                      defaultValue={userProfile?.display_name || ''}
                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
                    />
                  </div>
                </div>
                
                <div className="mt-6">
                  <Button>Save Changes</Button>
                </div>
              </div>
            )}

            {activeTab === 'notifications' && (
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-4">Notification Preferences</h3>
                <p className="text-gray-600 mb-6">Choose how you want to be notified about new papers and updates.</p>
                
                <div className="space-y-4">
                  <label className="flex items-center">
                    <input
                      type="checkbox"
                      defaultChecked={userProfile?.notification_preferences?.email_notifications}
                      className="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mr-3"
                    />
                    <span className="text-gray-700">Email notifications</span>
                  </label>
                  
                  <label className="flex items-center">
                    <input
                      type="checkbox"
                      defaultChecked={userProfile?.notification_preferences?.weekly_digest}
                      className="rounded border-gray-300 text-blue-600 focus:ring-blue-500 mr-3"
                    />
                    <span className="text-gray-700">Weekly digest</span>
                  </label>
                </div>
                
                <div className="mt-6">
                  <Button>Save Preferences</Button>
                </div>
              </div>
            )}

            {activeTab === 'privacy' && (
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-4">Privacy Settings</h3>
                <p className="text-gray-600 mb-6">Control your privacy and data sharing preferences.</p>
                <p className="text-sm text-gray-500">Privacy controls coming soon...</p>
              </div>
            )}

            {activeTab === 'subscription' && (
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-4">Subscription</h3>
                <p className="text-gray-600 mb-6">Manage your subscription and billing.</p>
                <Button onClick={() => window.location.href = '/app/subscription'}>
                  Manage Subscription
                </Button>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}